<template>
  <a-form class="base-info" :model="formState" :rules="formRules" ref="form">
    <a-form-item label="页面主题" name="">
      <a-input v-model:value="formState.theme" placeholder="" />
    </a-form-item>
    <a-form-item label="页面类型" name="">
      <a-checkbox-group
        v-model:value="formState.type"
        name="checkboxgroup"
        :options="pageTypes"
        @change="setPageType"
      />
    </a-form-item>
  </a-form>
</template>

<script>
/**
 * 页面配置 - 基础信息
 * @author 朱琦
 * @date   时间：2023/1/31
 */

const formKeys = ['theme', 'type']
export default {
  name: 'BaseInfo',
  props: {},
  components: {},
  data() {
    return {
      formState: {},
      formRules: {},
      pageTypes: [
        { label: '一级组件', value: 'first', disabled: true },
        { label: '二级组件', value: 'second' },
        { label: '详情组件', value: 'detail' }
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 获取表单数据
     * @param {Object} form 表单数据
     */
    getForm(form) {
      formKeys.forEach(key => {
        form[key] = this.formState[key]
      })
    },
    /**
     * 设置表单数据
     * @param {Object} form 表单数据
     */
    setForm(form) {
      formKeys.forEach(key => {
        this.formState[key] = form[key]
      })
      // 页面类型字段 处理
      const firstVal = this.pageTypes[0].value // 默认要选中的值
      if (!this.formState.type) {
        this.formState.type = [firstVal]
      } else if (!this.formState.type.includes(firstVal)) {
        this.formState.type = [...this.formState.type, firstVal]
      }

      this.setPageType()
    },
    /**
     * 设置 页面类型
     */
    setPageType() {
      // 保存到vuex
      this.$store.commit('page-manage-config/SET_PAGE_TYPE', this.formState.type)
    }
  }
}
</script>

<style scoped lang="less">
.base-info {
}
</style>
